<!DOCTYPE html>
<html>

<head>
    <metacharset="UTF-8">
        <title></title>
        <style> 
            .even {
  background-color: #cdedcd;
}


        </style>
</head>

<body>
    <div id="app" v-cloak>
        <table>
          <tr>
            <th>序号</th> <th>课程</th>
            <th>教师</th> <th>课时</th>
            <th>操作</th>
          </tr>
          <tr v-for="(book, index) in books" :key="book.id" :class="{even:(index+1)%2===0}">
            <td>{{book.id}}</td>
            <td>{{book.title}}</td>
            <td>{{book.teacher}}</td>
            <td>{{book.classHour}}</td>
            <td>
              <button @click="deleteItem(index)">删除</button>
            </td>
          </tr>
        </table>
      </div>
      
      
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js "></script>
    <script>
        const vm = Vue.createApp({
          data() {
            return {
              books: [
                { id: 1, title: '高等数学', teacher: '王老师', classHour: 32},
                { id: 2, title: 'VC++', teacher: '李老师', classHour:8},
                { id: 3, title: '英语', teacher: '孙老师', classHour: 16},
                { id: 4, title: 'Web开发基础', teacher: '王老师', classHour: 16},
              ]
            }
          },
          methods: {
            deleteItem(index) {
              this.books.splice(index, 1);
            }
          }
        }).mount('#app');
      </script>
      
</body>

</html>